<template>
  <BasicModal
    v-bind="$attrs"
    title="MarkDown示例"
    width="700px"
    :showOkBtn="false"
    :showCancelBtn="false"
  >
    <div class="markdown-text">
      # 一级标题
      <br />
      ## 二级标题
      <br />
      ### 三级标题
      <br />
      #### 四级标题
      <br />
      ##### 五级标题
      <br />
      ###### 六级标题
      <br /><br />
      **粗体**
      <br />
      *斜体*
      <br />
      ~~删除~~
      <br />
      [跳转链接](https://www.baidu.com/)
      <br /><br />
      * 无序列表1
      <br />
      * 无序列表2
      <br />
      1. 有序列表1
      <br />
      2. 有序列表2
      <br /><br />
      * [ ] 任务1
      <br />
      * [ ] 任务2
      <br /><br />
      ![avatar](https://image4.benlailife.com/SandBox/rma1.png)
      <br /><br />
      |表头名1|表头名2|表头名3|表头名4|
      <br />
      | --- | --- | --- | --- |
      <br />
      |小何|3岁|上海|女|
      <br />
      |小王|5岁|浙江|男|
      <br /><br />
      ```
      <br />
      代码块
      <br />
      ```
      <br /><br />
      > 引用
      <br /><br />
      `行内代码`
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicModal } from '/@/components/Modal';

  export default defineComponent({
    components: { BasicModal },
    setup() {
      return {};
    },
  });
</script>

<style lang="less" scoped>
  .ant-modal-footer {
    display: none;
  }

  .markdown-text {
    line-height: 30px;
  }
</style>
